.root {
  position: relative;
  width: var(--rp-size);
  height: var(--rp-size);
  min-width: var(--rp-size);
  min-height: var(--rp-size);
  --rp-transition-duration: 0ms;
}

.svg {
  width: var(--rp-size);
  height: var(--rp-size);
  min-width: var(--rp-size);
  min-height: var(--rp-size);
  transform: rotate(-90deg);
}

.curve {
  stroke: var(--curve-color, var(--rp-curve-root-color));
  transition:
    stroke-dashoffset var(--rp-transition-duration) ease,
    stroke-dasharray var(--rp-transition-duration) ease,
    stroke var(--rp-transition-duration);

  @mixin light {
    --rp-curve-root-color: var(--mantine-color-gray-2);
  }

  @mixin dark {
    --rp-curve-root-color: var(--mantine-color-dark-4);
  }
}

.label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline: var(--rp-label-offset);
}
